
<!--<pro-header [title]="'查询表格'"></pro-header>-->
<nz-card [nzBordered]="true">
    <a style=" color:red" (click)="getData()">
        <i class="anticon anticon-plus"></i><span>保存</span>
    </a>
    <a style=" color:red;margin-left: 100px" (click)="addEl('-1')">
        <i class="anticon anticon-plus"></i><span>生成节点</span>
    </a>

    <a style=" color:red;margin-left: 100px" (click)="addGroup('-1')">
        <i class="anticon anticon-plus"></i><span>生成分组</span>
    </a>


    <form nz-form>
        <div *ngFor="let l of list" style="">


            <button *ngIf="l.type!='group'&&l.type!='end'" (click)="editNode(l,$event,'-1')"
                    style="width:100px;margin:20px;text-align: center;height:50px;line-height: 50px;border: 1px solid #000; position: relative">
                {{l.text}}
            </button>

            <div (click)="editNode(l)" *ngIf="l.type=='group'"
                 style="width:100%;margin:20px;min-height:100px;background-color: #fff;border: 1px solid #000;float: left">
                {{l.props.group_text}} <a style=" color:red;" (click)="addEl(l.id,$event)">
                <i class="anticon anticon-plus"></i><span>生成节点</span>
            </a> <a style=" color:red;" (click)="copy(l.id,$event)">
                <i class="anticon anticon-plus"></i><span>生成批量</span>
            </a>
                <div *ngFor="let n of l.nodes">
                    <button
                        style="width:100px;margin:20px;text-align: center;height:50px;line-height: 50px;border: 1px solid #000;float: left"
                        (click)="editNode(n,$event,l.id)">
                        {{n.text}}

                    </button>

                </div>
            </div>

        </div>
        <div *ngFor="let l of list">
            <button *ngIf="l.type=='end'" (click)="editNode(l)"
                    style="width:100px;margin:20px;text-align: center;height:50px;line-height: 50px;border: 1px solid #000; position: relative">
                {{l.text}}
            </button>

        </div>
    </form>
</nz-card>
<nz-modal [nzWidth]='"900px"' [nzFooter]="''" [nzWrapClassName]="'vertical-center-modal'" [nzVisible]="modalVisible"
          [nzTitle]="'节点属性'"
          [nzConfirmLoading]="loading" [nzContent]="modalContent"
          (nzOnCancel)="modalVisible=false" (nzOnOk)="save()">
    <ng-template #modalContent>

        <div *ngIf="!insertFlag&&currNode">
            <form nz-form [formGroup]="validateForm">
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                        <label for="email" nz-form-item-required>id</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                        {{currNode.id}}
                    </div>
                </div>
                <div nz-form-item nz-row *ngIf="currNode.type!='group'">
                    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                        <label for="email" nz-form-item-required>分组id</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                        {{currNode.group_id}}
                    </div>
                </div>
                <div nz-form-item nz-row *ngIf="currNode.type!='group'">
                    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                        <label for="email" nz-form-item-required>当前节点名称</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                        <nz-input formControlName="s1" [(ngModel)]="currNode.text" name="jm" [nzSize]="'large'"
                                  [nzPlaceHolder]="'请输入'"
                                  nzId="no"></nz-input>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                        <label for="email" nz-form-item-required>节点类型</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                        <nz-select formControlName="s46" [(ngModel)]="currNode.type" name="status" nzId="status"
                                   [nzPlaceHolder]="'请选择'" [nzShowSearch]="true" [nzSize]="'large'" [nzDisabled]="true">
                            <nz-option *ngFor="let i of ntypes; let idx = index" [nzLabel]="i.text"
                                       [nzValue]="i.value"></nz-option>
                        </nz-select>
                    </div>
                </div>
                <div nz-form-item nz-row *ngIf="currNode.type!='grouping'&&currNode.type!='group'">
                    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                        <label for="email" nz-form-item-required>下一步节点名称</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                        <nz-select
                            [nzMode]="'multiple'"
                            formControlName="s6"
                            [nzPlaceHolder]="'请选择节点'"
                            [(ngModel)]="currNode.node_id"
                            [nzNotFoundContent]="'无法找到'">
                            <nz-option
                                *ngFor="let option of nids"
                                [nzLabel]="option.label"
                                [nzValue]="option.value"
                                [nzDisabled]="option.disabled">
                            </nz-option>
                        </nz-select>
                    </div>
                </div>

                <div *ngIf="currNode.type=='group'">
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                            <label for="email" nz-form-item-required>组名</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                            <nz-input formControlName="s3" [(ngModel)]="currNode.props.group_text" name="zm"
                                      [nzSize]="'large'"
                                      [nzPlaceHolder]="'请输入'"
                                      nzId="no"></nz-input>
                        </div>
                    </div>
                    <div nz-form-item nz-row>


                        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                            <label for="email" nz-form-item-required>组图片</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                            <button nz-button class="file-upload mt-sm">
                                <input id="file1" type="file" (change)="fileChange($event)"/>
                                <i class="anticon anticon-upload"></i><span>选择</span>
                            </button>
                            <button nz-button [nzType]="'primary'" (click)="savePdf()" class="mr-sm">
                                <span>上传</span>
                            </button>
                        </div>
                    </div>
                    <div nz-form-item nz-row>


                        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                            <img [src]='rightSrc' style="width: 100px;height: 100px;margin-left: 217px;">
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                            <label for="email" nz-form-item-required>组类型</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                            <nz-select formControlName="s4" [(ngModel)]="currNode.props.group_type" name="status"
                                       nzId="status"
                                       [nzPlaceHolder]="'请选择'" [nzShowSearch]="true" [nzSize]="'large'">
                                <nz-option *ngFor="let i of gtypes; let idx = index" [nzLabel]="i.text"
                                           [nzValue]="i.value"></nz-option>
                            </nz-select>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                            <label for="email" nz-form-item-required>分组人数</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                            <nz-input formControlName="s5" [(ngModel)]="currNode.props.group_limit" name="gl"
                                      [nzSize]="'large'"
                                      [nzPlaceHolder]="'请输入'"
                                      nzId="no"></nz-input>
                        </div>
                    </div>

                </div>

                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                        <label for="email" nz-form-item-required> 可见组</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="18" [nzXs]="24" nzHasFeedback>
                        <nz-select
                            [nzMode]="'multiple'"
                            formControlName="s678"
                            [nzPlaceHolder]="'请选择组'"
                            [(ngModel)]="currNode.visibleGroup"
                            [nzNotFoundContent]="'无法找到'">
                            <nz-option
                                *ngFor="let option of gids"
                                [nzLabel]="option.label"
                                [nzValue]="option.value"
                                [nzDisabled]="option.disabled">
                            </nz-option>
                        </nz-select>
                    </div>
                </div>


                <div *ngIf="currNode.type=='grouping'">
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                            <label for="email" nz-form-item-required> 分组后节点</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="18" [nzXs]="24" nzHasFeedback>
                            <nz-select
                                [nzMode]="'multiple'"
                                formControlName="s67"
                                [nzPlaceHolder]="'请选择节点'"
                                [(ngModel)]="currNode.node_id"
                                [nzNotFoundContent]="'无法找到'">
                                <nz-option
                                    *ngFor="let option of nids"
                                    [nzLabel]="option.label"
                                    [nzValue]="option.value"
                                    [nzDisabled]="option.disabled">
                                </nz-option>
                            </nz-select>
                        </div>
                    </div>


                </div>
            </form>
            <div>

                <button nz-button (click)="left(currNode.group_id)" [nzType]="'primary'" [nzSize]="'large'">
                    <i class="anticon anticon-left-circle-o"></i>
                </button>
                <button style="margin-left: 50px" nz-button (click)="right(currNode.group_id)" [nzType]="'primary'" [nzSize]="'large'">
                    <i class="anticon anticon-right-circle-o"></i>
                </button>
            </div>

            <br>
            <button nz-button (click)="gotoScenceEditor()" [nzType]="'primary'" [nzSize]="'large'"
                    *ngIf="currNode.type!='group'">
                <i class="anticon anticon-plus"></i><span>编辑场景</span>
            </button>
            <a (click)="deleteNode()">删除</a>


        </div>
        <div *ngIf="insertFlag">
            <form nz-form [formGroup]="validateForm">
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                        <label for="email" nz-form-item-required>id</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                        {{insertModel.id}}
                    </div>
                </div>
                <div nz-form-item nz-row *ngIf="insertModel.type!='group'">
                    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                        <label for="email" nz-form-item-required>分组id</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                        {{insertModel.group_id}}
                    </div>
                </div>
                <div nz-form-item nz-row *ngIf="insertModel.type!='group'">
                    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                        <label for="email" nz-form-item-required>当前节点名称</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                        <nz-input formControlName="s1" [(ngModel)]="insertModel.text" name="jm" [nzSize]="'large'"
                                  [nzPlaceHolder]="'请输入'"
                                  nzId="no"></nz-input>
                    </div>
                </div>
                <div nz-form-item nz-row *ngIf="insertModel.type!='group'">
                    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                        <label for="email" nz-form-item-required>节点类型</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                        <nz-select formControlName="s46" [(ngModel)]="insertModel.type" name="status" nzId="status"
                                   [nzPlaceHolder]="'请选择'" [nzShowSearch]="true" [nzSize]="'large'">
                            <nz-option *ngFor="let i of ntypes; let idx = index" [nzLabel]="i.text"
                                       [nzValue]="i.value"></nz-option>
                        </nz-select>
                    </div>
                </div>
                <div nz-form-item nz-row *ngIf="insertModel.type!='grouping'&&insertModel.type!='group'">
                    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                        <label for="email" nz-form-item-required>下一步节点名称</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>

                        <nz-select
                            [nzMode]="'multiple'"
                            formControlName="s6"
                            [nzPlaceHolder]="'请选择节点'"
                            [(ngModel)]="insertModel.node_id"
                            [nzNotFoundContent]="'无法找到'">
                            <nz-option
                                *ngFor="let option of nids"
                                [nzLabel]="option.label"
                                [nzValue]="option.value"
                                [nzDisabled]="option.disabled">
                            </nz-option>
                        </nz-select>
                    </div>
                </div>

                <div *ngIf="insertModel.type=='group'">
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                            <label for="email" nz-form-item-required>组名</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                            <nz-input formControlName="s3" [(ngModel)]="insertModel.props.group_text" name="zm"
                                      [nzSize]="'large'"
                                      [nzPlaceHolder]="'请输入'"
                                      nzId="no"></nz-input>
                        </div>
                    </div>
                    <div nz-form-item nz-row>


                        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                            <label for="email" nz-form-item-required>组图片</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                            <button nz-button class="file-upload mt-sm">
                                <input id="file2" type="file" (change)="fileChange($event)"/>
                                <i class="anticon anticon-upload"></i><span>选择</span>
                            </button>
                            <button nz-button [nzType]="'primary'" (click)="savePdf()" class="mr-sm">
                                <span>上传</span>
                            </button>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                            <img [src]='rightSrc' style="width: 100px;height: 100px;margin-left: 217px;">
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                            <label for="email" nz-form-item-required>组类型</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                            <nz-select formControlName="s4" [(ngModel)]="insertModel.props.group_type" name="status"
                                       nzId="status"
                                       [nzPlaceHolder]="'请选择'" [nzShowSearch]="true" [nzSize]="'large'">
                                <nz-option *ngFor="let i of gtypes; let idx = index" [nzLabel]="i.text"
                                           [nzValue]="i.value"></nz-option>
                            </nz-select>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                            <label for="email" nz-form-item-required>分组人数</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                            <nz-input formControlName="s5" [(ngModel)]="insertModel.props.group_limit" name="gl"
                                      [nzSize]="'large'"
                                      [nzPlaceHolder]="'请输入'"
                                      nzId="no"></nz-input>
                        </div>
                    </div>

                </div>

                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                        <label for="email" nz-form-item-required> 可见组</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="18" [nzXs]="24" nzHasFeedback>
                        <nz-select
                            [nzMode]="'multiple'"
                            formControlName="s678"
                            [nzPlaceHolder]="'请选择组'"
                            [(ngModel)]="insertModel.visibleGroup"
                            [nzNotFoundContent]="'无法找到'">
                            <nz-option
                                *ngFor="let option of gids"
                                [nzLabel]="option.label"
                                [nzValue]="option.value"
                                [nzDisabled]="option.disabled">
                            </nz-option>
                        </nz-select>
                    </div>
                </div>
                <div *ngIf="insertModel.type=='grouping'">
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                            <label for="email" nz-form-item-required> 分组后节点</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="18" [nzXs]="24" nzHasFeedback>
                            <nz-select
                                [nzMode]="'multiple'"
                                formControlName="s67"
                                [nzPlaceHolder]="'请选择节点'"
                                [(ngModel)]="insertModel.node_id"
                                [nzNotFoundContent]="'无法找到'">
                                <nz-option
                                    *ngFor="let option of nids"
                                    [nzLabel]="option.label"
                                    [nzValue]="option.value"
                                    [nzDisabled]="option.disabled">
                                </nz-option>
                            </nz-select>
                        </div>
                    </div>


                </div>
            </form>
            <button nz-button (click)="insert()" [nzType]="'primary'" [nzSize]="'large'">
                <i class="anticon anticon-plus"></i><span>新增</span>
            </button>


        </div>
    </ng-template>
</nz-modal>

